<template>
  <div class="main">
    <img :src="good.img"/>
    <div class="cart-right">
        <div class="cart-title">{{ good.title }} </div>
        <div class="cart-descript">{{good.des}}</div>
        <div class="cart-price">&yen;{{good.price}}</div>
        <div class="cart-btn">
            <el-input-number v-model="num"  :min="1" :max="10" ></el-input-number>
            <el-button type="warning" @click="add_cart(good)">加入购物车</el-button>
        </div>
    </div>
  </div>
      <!-- <div class="cart-box" v-for="(item,index) in editableTabs[0].content" :key="index" v-if="item.id+''==editableTabsValue" v-show="!flag">
          
      </div> -->
</template>
<script>
import { good_detail } from '@/api/goods_api'
import { cart_add } from '@/api/cart_api';
export default{
  data(){
    return{
      good:"",
      num:0
    }
  },
  methods:{
    revert(data){
      var parts = data.split(';base64,'),
      contentType = parts[0].split(':')[1],
      raw = window.atob(parts[1]),
      length = raw.length,
      arr = new Uint8Array(length);
      for (var i = 0; i < length; i++) {
          arr[i] = raw.charCodeAt(i);
      }
      var blob = new Blob([arr], { type: contentType });
      return URL.createObjectURL(blob);
    },
    async add_cart(good){
      let user = JSON.parse(localStorage.getItem('user'))
      if(!user){
        this.$message({
          type:'info',
          message:'请先登录'
        })
        return
      }
      const res = await cart_add(good.id,user.user_id,this.num)
      this.$message({
          type:res.data.code==200?'success':'error',
          message:res.data.msg
        })
      this.num=1
    },
    async detail(){
      let map = {
        type:this.$route.params.type,
        id:this.$route.params.id
      }
      const {data:res} = await good_detail(map)
      console.log(res.data);
      
      res.data.img = this.revert(res.data.img)
      this.good= res.data
    }
  },
  created(){
    this.detail()
  }
}
</script>
<style lang="scss" scoped>
.main{
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  display: flex;
  // padding: 5%;

  img{
    height: 40%;
    border-radius: 5px;
    margin: 5%;
  }
  .cart-right{
    margin: 5%;
    .cart-title{
      font-weight: bold;
      font-size: 30px;
    }
    .cart-descript{
      margin-top: 5%;
      font-size: 22px;
    }
    .cart-price{
      color:red;
      font-weight: bold;
      margin-top: 25%;
      font-size: 35px;
    }
    .cart-btn{
      margin-top: 10%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>